<!-- 菜谱 -->
<template>
	<view class="Menu">
		<!-- 搜索 -->
		<Header-Search></Header-Search>
		<!-- 导航栏 -->
		<u-sticky bgColor="#fffafa" offset-top="5">
			<u-tabs :list="tabList" @click="click" :scrollable="false" lineWidth="30" lineColor="#EE0A24"
				:activeStyle="{color: '#EE0A24',fontWeight: 'bold'}"></u-tabs>
		</u-sticky>
		<!-- 内容模块 -->
		<scroll-view :scroll-top="scrollTop" scroll-y="true" @scrolltolower="reachBottom" @scroll="scroll">
			<u-row class="Search" justify="center">
				<view class="tab" v-for="item,index in classList" :key="index">
					<u-col @click="gotoMenuDetails(item.name)">
						<img :src="item.pic" alt="" width="100%">
						<text class="u-line-1">{{item.name}}</text>
						<text class="text_left">用餐人数:{{item.peoplenum}}</text>
					</u-col>
				</view>
			</u-row>
		</scroll-view>
		
		<u-toast ref="uToast" />
		<!-- 置顶按钮 -->
		<xrzp-Istop :goTop="goTop" :toTopShow='toTopShow'></xrzp-Istop>
		<!-- 底部选项卡 -->
		<xrzp-FootTabbar></xrzp-FootTabbar>
	</view>
</template>

<script>
	import { request_byclass } from '@/api/http.js';
	export default {
		data() {
			return {
				classid: 562,
				tabList: [{
					name: '早餐',
					classid: 562
				}, {
					name: '午餐',
					classid: 563
				}, {
					name: '下午茶',
					classid: 564
				}, {
					name: '晚餐',
					classid: 565
				}],
				classList: [],
				start: 0,
				scrollTop: 0,
				toTopShow: false,
				old: {
					scrollTop: 0
				},
				appkey: '13e76141171ebe61f22e24477b559988',
			}
		},
		mounted() {
			this.getData();
		},
		methods: {
			async getData() {
				let data = {
					classid: this.classid,
					start: 0,
					num: 20,
					appkey: this.appkey
				};
				let res = [];
				res = await request_byclass(data);
				this.classList = res.list;
			},
			// 跳转到详情页
			gotoMenuDetails(name) {
				console.log('点了', name);
			},
			// 滚动事件
			scroll(e) {
				this.old.scrollTop = e.detail.scrollTop
				this.toTopShow = this.old.scrollTop >= 300
			},
			goTop() {
				this.scrollTop = this.old.scrollTop
				this.$nextTick(function() {
					this.scrollTop = 0
				});
			},
			// 触底加载...
			reachBottom() {
				this.start += 20;
				let data = {
					classid: this.classid,
					start: this.start,
					num: 20,
					appkey: this.appkey
				};
				request_byclass(data).then(res=>{
					if(res ){
						this.classList = [...this.classList, ...res.list];
					}else{
						this.$refs.uToast.show({
						    type:'error',
						    message:'到底了哦~',
						})  
					}
				})
			},
			// 切换导航栏分类
			click(item) {
				this.classid = item.classid;
				this.start = 0;
				this.goTop()
				this.getData()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.Menu {
		uni-scroll-view {
			width: 100%;
			height: calc(100vh - 200rpx);
			.Search {
				flex-wrap: wrap;
				.tab {
					width: 46%;
					margin: 10rpx;
					border: 4rpx solid skyblue;
					border-radius: 10rpx;
					overflow: hidden;
					.u-line-1 {
						font-weight: 900;
						font-size: 30rpx;
						color: #000;
						margin: 0 4rpx;
					}
					.text_left {
						::v-deep span{
							font-size: 26rpx;
							font-weight: 400;
							// float: left;
							margin: 0 4rpx;
						}
					}
				}
			}
		}
	}
</style>
